<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>问题</span>
      </div>
      <div class="box-top">
        <div class="item">
          <p class="item-title item-title1">故障</p>
          <div class="child child-bg1">
            <div class="child-box">
              <p>SNMP</p>
              <p>{{postListTop?postListTop.snmpCrisis?postListTop.snmpCrisis:0:0}}</p>
            </div>
            <div class="child-box">
              <p>SMTP</p>
              <p>{{postListTop?postListTop.smtpCrisis?postListTop.smtpCrisis:0:0}}</p>
            </div>
            <div class="child-box">
              <p>Windows事件日志</p>
              <p>{{postListTop?postListTop.windowsLogCrisis?postListTop.windowsLogCrisis:0:0}}</p>
            </div>
          </div>
        </div>
        <div class="item">
          <p class="item-title item-title2">异常</p>
          <div class="child child-bg2">
            <div class="child-box">
              <p>SNMP</p>
              <p>{{postListTop?postListTop.snmpAlarm?postListTop.snmpAlarm:0:0}}</p>
            </div>
            <div class="child-box">
              <p>SMTP</p>
              <p>{{postListTop?postListTop.smtpAlarm?postListTop.smtpAlarm:0:0}}</p>
            </div>
            <div class="child-box">
              <p>Windows事件日志</p>
              <p>{{postListTop?postListTop.windowsLogAlarm?postListTop.windowsLogAlarm:0:0}}</p>
            </div>
          </div>
        </div>
        <div class="item">
          <p class="item-title item-title3">告警</p>
          <div class="child child-bg3">
            <div class="child-box">
              <p>SNMP</p>
              <p>{{postListTop?postListTop.snmpNotice?postListTop.snmpNotice:0:0}}</p>
            </div>
            <div class="child-box">
              <p>SMTP</p>
              <p>{{postListTop?postListTop.smtpNotice?postListTop.smtpNotice:0:0}}</p>
            </div>
            <div class="child-box">
              <p>Windows事件日志</p>
              <p>{{postListTop?postListTop.windowsLogNotice?postListTop.windowsLogNotice:0:0}}</p>
            </div>
          </div>
        </div>
        <div class="item">
          <p class="item-title item-title4">延时</p>
          <div class="child child-bg4">
            <div class="child-box">
              <p>SNMP</p>
              <p>{{postListTop?postListTop.snmpUnknown?postListTop.snmpUnknown:0:0}}</p>
            </div>
            <div class="child-box">
              <p>SMTP</p>
              <p>{{postListTop?postListTop.smtpUnknown?postListTop.smtpUnknown:0:0}}</p>
            </div>
            <div class="child-box">
              <p>Windows事件日志</p>
              <p>{{postListTop?postListTop.windowsLogUnknown?postListTop.windowsLogUnknown:0:0}}</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="box-bottom">
      <el-card class="box-card card-left">
        <div slot="header" class="clearfix">
          <span>可视化分析</span>
          <span class="but-box">
            <el-button type="text" @click="handleAlarm('今日')">今日</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleAlarm('昨日')">昨日</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleAlarm('本周')">本周</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleAlarm('上周')">上周</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleAlarm('本月')">本月</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleAlarm('上月')">上月</el-button>
            <el-button type="text" @click="handleAlarm('今日')" icon="el-icon-refresh"></el-button>
          </span>
        </div>
        <div class="card-echart">
          <div class="top-title">
            <span>异常总数</span>
            <span>{{postList?postList.total:0}}</span>
            <i class="el-icon-warning-outline"></i>
          </div>
          <div class="box-echart">
            <div class="echart-top">
              <div class="top-l">
                <pie-charts
                  width="60%"
                  :dataList="dataList1"
                  :colors="[variables.errorColor, '#D8D8D8']"
                  :texts="postList.faultPercent"
                  class="pie"
                />
                <div class="top-r">
                  <p>{{postList?postList.faultTotal:0}}</p>
                  <p>故障</p>
                </div>
              </div>
              <div class="top-l">
                <pie-charts
                  width="60%"
                  :dataList="dataList2"
                  :colors="[variables.lateColor, '#D8D8D8']"
                  :texts="postList.abnormalPercent"
                  class="pie"
                />
                <div class="top-r">
                  <p>{{postList?postList.abnormalTotal:0}}</p>
                  <p>异常</p>
                </div>
              </div>
            </div>
            <div class="echart-bot">
              <div class="top-l">
                <pie-charts
                  width="60%"
                  :dataList="dataList3"
                  :colors="[variables.warningColor, '#D8D8D8']"
                  :texts="postList.alarmPercent"
                  class="pie"
                />
                <div class="top-r">
                  <p>{{postList?postList.alarmTotal:0}}</p>
                  <p>告警</p>
                </div>
              </div>
              <div class="top-l">
                <pie-charts
                  width="60%"
                  :dataList="dataList4"
                  :colors="[variables.abnormalColor, '#D8D8D8']"
                  :texts="postList.delayedPercent"
                  class="pie"
                />
                <div class="top-r">
                  <p>{{postList?postList.delayedTotal:0}}</p>
                  <p>延时</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card-right">
        <div slot="header" class="clearfix">
          <el-button type="text" @click="handlerClick('1')">应用</el-button>
          <el-button type="text" @click="handlerClick('2')">数据</el-button>
          <!-- <el-button type="text" @click="handlerClick('3')">品牌</el-button>
          <el-button type="text" @click="handlerClick('')">最新</el-button> -->
        </div>
        <div class="text item">
          <el-table :data="detectionList" height="400">
            <!-- <el-table-column v-if="isShow === '1'" label="应用" align="center" prop="taskName" />
            <el-table-column v-if="isShow === '2'" label="数据" align="center" prop="dataCenter" /> -->
            <!-- <el-table-column v-if="isShow === '3'" label="品牌" align="center" prop="healthStatus" /> -->
            <el-table-column label="问题" align="center" prop="linkCommunicationDelay" width="340">
              <template slot-scope="scope">
                <span v-show="isShow === '1'">{{ `${scope.row.hostEncoding} 应用的启动时间 ${scope.row.extend4}ms，响应时间 ${scope.row.extend5}ms` }}</span>
                <span v-show="isShow === '2'">{{ ` ${isShow === '2'?'主机':''} ${scope.row.hostEncoding} 最近两分钟 内存使用率 ${scope.row.capacityUsage}%` }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态" align="center" prop="cpuAvailability" /> -->
            <el-table-column label="数据中心" align="center" prop="dataCenter">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.data_center" :value="scope.row.dataCenter"/>
              </template>
            </el-table-column>
            <el-table-column label="告警数量" align="center" prop="alarmStatistics" />
            <el-table-column label="异常状态" align="center" prop="healthStatus">
              <template slot-scope="scope">
                <dict-tag :class="statusClass[scope.row.healthStatus]" :options="dict.type.health_status" :value="scope.row.healthStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="日志字段" align="center" prop="log" width="230" />
            <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
            <!-- <el-table-column label="持续时长(ms)" align="center" prop="extend3" /> -->
            <!-- <el-table-column label="问题ID" align="center" prop="hardwareSituation" /> -->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getListApp"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import variables from "@/assets/styles/variables.scss";
import { showTableAlarm,showOtherTableAlarm } from "@/api/system/alarm.js";
import { listAppManagement } from "@/api/system/appManagement.js";
import { listManagement, abnormalListManagement } from "@/api/system/management.js";
import { 
  formatDate,
  getYesterDayDate,
  getWeekStartDate,
  getWeekEndDate,
  getMonthStartDate,
  getMonthEndDate,
 } from "@/utils/date.js";
import PieCharts from './components/PieChart.vue'

export default {
  name: 'abnormal',
  dicts: ['status','health_status', 'data_center'],
  components: {
    PieCharts,
    
  },
  computed: {
    variables() {
      return variables;
    },
  },
  data() {
    return {
      isShow: '1',
      detectionList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
      },
      postListTop: {},
      postList: {
        // "createBy": null,
        // "createTime": null,
        // "updateBy": null,
        // "updateTime": null,
        // "remark": null,
        // "id": null,
        // "snmpCrisis": 0,
        // "smtpCrisis": 0,
        // "windowsLogCrisis": 0,
        // "snmpAlarm": 0,
        // "smtpAlarm": 0,
        // "windowsLogAlarm": 0,
        // "snmpNotice": 0,
        // "smtpNotice": 0,
        // "windowsLogNotice": 0,
        // "snmpUnknown": 0,
        // "smtpUnknown": 0,
        // "windowsLogUnknown": 0,
        // "abnormalLevel": null,
        // "abnormalStatus": null,
        // "alarmStatus": null,
        // "delFlag": null,
        // "faultTotal": null,
        // "faultPercent": 0,//故障
        // "abnormalTotal": null,
        // "abnormalPercent": 0, //异常
        // "alarmTotal": null,
        // "alarmPercent": 0, // 告警
        // "delayedTotal": null,
        // "delayedPercent": 0, //延时
        // "total": 0,// 异常总数
        // "timeFrom": null,
        // "timeTo": null
      },
      // 故障
      dataList1: [
        { value: 100, name: '故障' },
        { value: 0, name: '异常' },
      ],
      // 异常
      dataList2: [
        { value: 100, name: '已完成' },
        { value: 0, name: '未完成' },
      ],
      // 告警
      dataList3: [
        { value: 100, name: '已完成' },
        { value: 0, name: '未完成' },
      ],
      // 延时
      dataList4: [
        { value: 100, name: '已完成' },
        { value: 0, name: '未完成' },
      ],

      obj: {
        // "createBy": null,
        // "createTime": null,
        // "updateBy": null,
        // "updateTime": null,
        // "remark": null,
        // "id": null,
        // "snmpCrisis": 13,
        // "smtpCrisis": 12,
        // "windowsLogCrisis": 18,
        // "snmpAlarm": 16,
        // "smtpAlarm": 11,
        // "windowsLogAlarm": 8,
        // "snmpNotice": 0,
        // "smtpNotice": 4,
        // "windowsLogNotice": 30,
        // "snmpUnknown": 0,
        // "smtpUnknown": 0,
        // "windowsLogUnknown": 0,
        // "abnormalLevel": null,
        // "abnormalStatus": null,
        // "alarmStatus": null,
        // "delFlag": null,
        // "extend1": null,
        // "extend2": null,
        // "extend3": null,
        // "extend4": null,
        // "extend5": null,
        // "extend6": null,
        // "extend7": null,
        // "extend8": null,
        // "extend9": null,
        // "extend10": null,
        // "faultTotal": null,
        // "faultPercent": 38.4,//故障
        // "abnormalTotal": null,
        // "abnormalPercent": 30.4, //异常
        // "alarmTotal": null,
        // "alarmPercent": 31.3, // 告警
        // "delayedTotal": null,
        // "delayedPercent": 0, //延时
        // "total": 112,// 异常总数
        // "timeFrom": null,
        // "timeTo": null
      }
    }
  },
  created() {
    this.handleAlarm('今日')
    this.getListAppManagement()    
    this.topAjax('今日')
  },
  mounted() {
    
  },
  methods: {
    topAjax() {
      let day = new Date()
      let params = {
        timeFrom: formatDate(day),
        timeTo: formatDate(day)
      }
      showOtherTableAlarm(params).then(response => {
        this.postListTop = response;
      });
    },
    /** 查询可视化分析 */
    getList() {
      let params = {
        timeFrom: this.queryParams.startTime,
        timeTo: this.queryParams.endTime
        // timeFrom: '2024-06-07',
        // timeTo: '2024-06-07'
      }
      console.log(params);
      
      // this.postList = this.obj
      showTableAlarm(params).then(response => {
        console.log(response,'response');
        this.postList = response;
        this.dataList1 = []
        this.dataList2 = []
        this.dataList3 = []
        this.dataList4 = []
        for(let item in response) {
          if(response['faultTotal'] != 0) {
            if(['faultTotal','total'].includes(item)) {
              let obj = {
                value: response[item],
                name: item == 'faultTotal'?'故障': '异常'
              }
              this.dataList1.push(obj)
            }
          }
          if(response['abnormalTotal'] != 0) {
            if(['abnormalTotal','total'].includes(item)) {
              let obj = {
                value: response[item],
                name: item == 'abnormalTotal'?'故障': '异常'
              }
              this.dataList2.push(obj)
            }
          }
          if(response['alarmTotal'] != 0) {
            if(['alarmTotal','total'].includes(item)) {
              let obj = {
                value: response[item],
                name: item == 'alarmTotal'?'告警': '异常'
              }
              this.dataList3.push(obj)
            }
          }
          if(response['delayedTotal'] != 0) {
            if(['delayedTotal','total'].includes(item)) {
              let obj = {
                value: response[item],
                name: item == 'delayedTotal'?'延时': '异常'
              }
              this.dataList4.push(obj)
            }
          }
        }
      });
    },
    getListApp() {
      if(this.isShow == '1') {
        this.getListAppManagement()
      }else if(this.isShow == '2') {
        this.getListManagement()
      }
    },
    // 应用
    getListAppManagement() {
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }
      listAppManagement(params).then((res) => {
        this.detectionList = res.rows
        this.total = res.total
      })
    },
    // 数据
    getListManagement() {
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }
      let strArr = ['1','2','3','4']
      abnormalListManagement(params).then((res) => {
        // this.detectionList = res.rows.filter((item) => strArr.includes(item.healthStatus))
        this.detectionList = res.rows
        this.total = res.total
      })
    },

    handlerClick(val) {
      this.isShow = val;
      if(val == '1') {
        this.getListAppManagement()
      }else if(val == '2') {
        this.getListManagement()
      }
      
    },
    handleAlarm(val) {
      if(val == '今日') {
        let day = new Date()
        this.queryParams.startTime = formatDate(day)
        this.queryParams.endTime = formatDate(day)
      }else if(val == '昨日') {
        this.queryParams.startTime = getYesterDayDate(1)
        this.queryParams.endTime = getYesterDayDate(1)
      }else if(val == '本周') {
        this.queryParams.startTime = getWeekStartDate(0)
        this.queryParams.endTime = getWeekEndDate(0)
      }else if(val == '上周') {
        this.queryParams.startTime = getWeekStartDate(7)
        this.queryParams.endTime = getWeekEndDate(7)
      }else if(val == '本月') {
        this.queryParams.startTime = getMonthStartDate(0)
        this.queryParams.endTime = getMonthEndDate(0)
      }else if(val == '上月') {
        this.queryParams.startTime = getMonthStartDate(1)
        this.queryParams.endTime = getMonthEndDate(1)
      }
      this.getList()
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/variables.scss';

.box-bottom {
  display: flex;
  margin-top: 20px;

  .card-left {
    flex: 1;
    margin-right: 20px;

    .but-box {
      float: right;
    }

    .card-echart {
      line-height: 3;
      .top-title {
        text-align: center;
        span:nth-child(2) {
          padding-left: 30px;
          padding-right: 30px;
          font-size: 20px;
        }
      }
      .box-echart {
        
        .echart-top, .echart-bot {
          display: flex;
          // justify-content: center;
          .top-l {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;

            .top-r {
              p:nth-child(1) {
                // padding-top: 10px;
                text-align: center;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }

  .card-right {
    flex: 2
  }
}

.box-top {
  display: flex;
  justify-content: space-between;
  .item {
    width: 24%;

    .item-title {
      color: #fff;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
    }
    .child {
      display: flex;
      justify-content: space-around;

      .child-box {
        padding: 15px 0;
        p:nth-child(2) {
          padding-top: 10px;
          text-align: center;
        }
      }
    }
  }
}

.item-title1 {
  background-color: $error;
}
.child-bg1 {
  background-color: #fdeeee;
}

.item-title2 {
  background-color: $late;
}
.child-bg2 {
  background-color: #fdf2ea;
}

.item-title3 {
  background-color: $warning;
}
.child-bg3 {
  background-color: #eff2f7;
}

.item-title4 {
  background-color: $abnormal;
}
.child-bg4 {
  background-color: #f2f2f2;
}
</style>